<template>
  <create-view
    :loading="loading"
    :body-style="{ height: '100%'}">
    <flexbox
      direction="column"
      align="stretch"
      class="crm-create-container">
      <flexbox class="crm-create-header">
        <div style="flex:1;font-size:17px;color:#333;">{{ title }}</div>
        <img
          class="close"
          src="@/assets/img/task_close.png"
          @click="hidenView" >
      </flexbox>
      <div class="crm-create-flex">
        <create-sections title="基本信息">
          <flexbox
            direction="column"
            align="stretch">
            <div class="crm-create-body">
              <el-form
                ref="crmForm"
                :model="crmForm"
                label-position="top"
                class="crm-create-box">
                <el-form-item
                  v-for="(item, index) in crmForm.crmFields"
                  :key="item.key"
                  :prop="'crmFields.' + index + '.value'"
                  :class="{ 'crm-create-block-item': item.showblock, 'crm-create-item': !item.showblock }"
                  :rules="crmRules[item.key]"
                  :style="{'padding-left': getPaddingLeft(item, index), 'padding-right': getPaddingRight(item, index)}">
                  <div
                    slot="label"
                    style="display: inline-block;">
                    <div style="margin:5px 0;font-size:12px;word-wrap:break-word;word-break:break-all;">
                      {{ item.data.name }}
                      <span style="color:#999;">
                        {{ item.data.inputTips ? '（'+item.data.inputTips+'）':'' }}
                      </span>
                    </div>
                  </div>
                  <template v-if="item.data.formType == 'role'">
                    <el-select
                      v-model="roleIds"
                      :popper-append-to-body="false"
                      popper-class="select-popper-class"
                      filterable
                      multiple
                      placeholder="请选择"
                      @change="selectRole(item)">
                      <el-option-group
                        v-for="group in roleList"
                        :key="group.pid"
                        :label="group.name">
                        <el-option
                          v-for="item in group.list"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id"/>
                      </el-option-group>
                    </el-select>
                  </template>
                  <template v-else-if="item.data.formType == 'category'">
                    <el-select v-model="category" placeholder="请选择" @change="selectCategory(item)">
                      <el-option
                        v-for="(item, index) in categorys"
                        :key="index"
                        :label="item"
                        :value="item"/>
                    </el-select>
                  </template>
                  <!-- 员工 和部门 为多选（radio=false）  relation 相关合同商机使用-->
                  <template v-else>
                    <component
                      :is="item.data.formType | typeToComponentName"
                      :value="item.value"
                      :index="index"
                      :item="item"
                      :relation="item.relation"
                      :radio="false"
                      :disabled="item.disabled"
                      :per-type="perType"
                      @value-change="fieldValueChange"/>
                  </template>
                </el-form-item>
              </el-form>
            </div>
          </flexbox>
        </create-sections>
        <create-sections
          v-if="tableShow"
          title="关联资源">
          <relativeSource
            ref="relativeSource"
            :kms-type="kmsType"
            :action="action"
            :sort-id="kmsType == 'resource'? 'file_id' : 'resource_id'"
            :source-list="sourceList"
            @value-change="getReletiveSource"
          />
        </create-sections>
      </div>

      <div class="handle-bar">
        <el-button
          class="handle-button"
          @click.native="hidenView">取消</el-button>
        <el-button
          class="handle-button"
          type="primary"
          @click.native="saveField(false)">{{ sureBtnTitle }}</el-button>
      </div>
    </flexbox>
  </create-view>
</template>
<script type="text/javascript">
import kmsTypeModel from '@/views/kmsmanagement/model/kmsTypeModels'
import CreateView from '@/components/CreateView'
import CreateSections from '@/components/CreateSections'
import CreateExamineInfo from '@/components/Examine/CreateExamineInfo'
import { filedGetField, filedValidates } from '@/api/customermanagement/common'
import { saveFile } from '@/api/kmsmanagement/file.js'
import { saveResource } from '@/api/kmsmanagement/source.js'
import { saveCourse } from '@/api/kmsmanagement/course.js'
import { roleList } from '@/api/systemManagement/EmployeeDepManagement.js'
import { crmSettingRecordListAPI } from '@/api/systemManagement/systemKms.js'
import { timekeep } from '@/utils/index.js'
import {
  regexIsCRMNumber,
  regexIsCRMMoneyNumber,
  regexIsCRMMobile,
  regexIsCRMEmail,
  objDeepCopy
} from '@/utils'

import { isArray } from '@/utils/types'
import {
  XhInput,
  XhTextarea,
  XhSelect,
  XhMultipleSelect
} from '@/components/CreateCom'
import XhInputSelect from '../../../components/CreateCom/XhInputSelect.vue'
import uploadSingleFile from '../../../components/CreateCom/uploadSingleFile.vue'
import avatarUpload from '../../../components/CreateCom/uploadAvatar'
import xhTime from '../../../components/CreateCom/xhTime.vue'
import xhShowText from '../../../components/CreateCom/xhShowText.vue'
import relativeSource from './relativeSource.vue'
export default {
  name: 'KmsCreateView', // 所有新建效果的view
  components: {
    CreateView,
    CreateSections,
    CreateExamineInfo, // 审核信息
    XhInput,
    XhTextarea,
    XhSelect,
    XhMultipleSelect,
    XhInputSelect,
    uploadSingleFile,
    xhTime,
    xhShowText,
    relativeSource,
    avatarUpload
  },
  filters: {
    /** 根据type 找到组件 */
    typeToComponentName(formType) {
      if (
        formType == 'text' ||
        formType == 'mobile' ||
        formType == 'floatnumber' ||
        formType == 'email' ||
        formType == 'number'
      ) {
        return 'XhInput'
      } else if (formType == 'textarea') {
        return 'XhTextarea'
      } else if (formType == 'select' || formType == 'business_status') {
        return 'XhSelect'
      } else if (formType == 'checkbox') {
        return 'XhMultipleSelect'
      } else if (formType === 'uploadsingle') {
        return 'uploadSingleFile'
      } else if (formType === 'time') {
        return 'xhTime'
      } else if (formType === 'showText') {
        return 'xhShowText'
      } else if (formType === 'role') {
        return 'XhMultipleSelect'
      } else if (formType === 'pictures') {
        return 'avatarUpload'
      }
    }
  },
  props: {
    // CRM类型
    kmsType: {
      type: String,
      default: ''
    },
    /**
     * save:添加、update:编辑(action_id)、read:详情、index:列表
       * relative: 相关 添加(目前用于客户等相关添加) 如果有relativeData 直接合并入上传
     */
    action: {
      type: Object, default: () => {
        return {
          type: 'ave',
          id: '',
          data: {} // 编辑所需信息
        }
      }
    },
    info: {
      type: Object,
      default: () => {}
    },
    sourceList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 标题展示名称
      title: '',
      loading: false,
      saveAndCreate: false, // 保存并新建
      // 自定义字段验证规则
      crmRules: {},
      // 自定义字段信息表单
      crmForm: {
        crmFields: []
      },
      // 审批信息
      examineInfo: {},
      // 数据查重按钮的显示
      showBtnCheck: false,
      showDuplicateCheck: false,
      customerName: '',
      sourceTableList: [],
      roleList: [],
      roleIds: [],
      categorys: [],
      category: '',
      perType: []
    }
  },
  computed: {
    /** 合同 回款 线索下展示审批人信息 */
    showExamine() {
      if (
        this.kmsType == 'officePurchase' ||
        this.kmsType == 'normalPurchase' ||
        this.kmsType == 'projectPurchase' ||
        this.kmsType == 'devPurchase' ||
        this.kmsType == 'otherPurchase'
      ) {
        return true
      }
      return false
    },
    // 草稿按钮
    showDraft() {
      if (
        this.kmsType == 'officePurchase' ||
        this.kmsType == 'normalPurchase' ||
        this.kmsType == 'projectPurchase' ||
        this.kmsType == 'devPurchase' ||
        this.kmsType == 'otherPurchase'
      ) {
        return true
      }
      return false
    },
    sureBtnTitle() {
      return '保存'
    },
    // 文件上传时显示
    tableShow() {
      if (
        this.kmsType == 'resource' ||
        this.kmsType == 'course') {
        return true
      }
      return false
    }
  },
  watch: {
    kmsType: function(value) {
      this.title = this.getTitle()
      this.crmRules = {}
      this.crmForm = {
        crmFields: []
      }
      this.examineInfo = {}
      this.getField()
    },
    info: function(val) {
      this.crmForm.crmFields.forEach(item => {
        item.value = val[item.key]
      })
    }
  },
  mounted() {
    // 获取title展示名称
    document.body.appendChild(this.$el)
    if (this.kmsType == 'file') {
      this.perType = ['pdf', 'video']
    }
    this.title = this.getTitle()
    if (this.kmsType == 'course') {
      this.perType = ['img']
      this.getRoleList()
    } else if (this.kmsType == 'resource') {
      this.getResources()
    } else {
      this.getField()
    }
  },
  destroyed() {
    // remove DOM node after destroy
    if (this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el)
    }
  },
  methods: {
    getResources() {
      crmSettingRecordListAPI().then(res => {
        this.categorys = res.data
        this.getField()
      })
    },
    getRoleList() {
      roleList().then(res => {
        this.roleList = res.data
        this.getField()
      }).catch(res => {

      })
    },
    showDup(data) {
      this.showDuplicateCheck = true
      this.customerName = data
    },
    // 审批信息值更新
    examineValueChange(data) {
      this.examineInfo = data
    },
    selectRole(item) {
      item.value = this.roleIds
    },
    selectCategory(item) {
      const index = this.categorys.findIndex(item => { return item == this.category })
      item.value = index + 1
    },
    // 字段的值更新
    fieldValueChange(data) {
      var item = this.crmForm.crmFields[data.index]
      this.showBtnCheck = false
      // 无事件的处理 后期可换成input实现
      if (item.data.formType == 'uploadsingle') {
        data.size && this.$set(this.crmForm.crmFields[4], 'value', data.size)
        data.time && this.$set(this.crmForm.crmFields[3], 'value', data.time);
        ('isVideo' in data && data.isVideo) ? this.$set(this.crmForm.crmFields[3], 'disabled', true) : this.$set(this.crmForm.crmFields[3], 'disabled', false)
      }
      if (item.data.formType == 'time' && data.value == ':') {
        item.value = ''
      } else {
        item.value = data.value
      }
      if (
        item.data.formType == 'time'
      ) {
        this.$refs.crmForm.validateField('crmFields.' + data.index + '.value')
      }
    },
    // 获取自定义字段
    getField() {
      this.loading = true
      // 获取自定义字段的更新时间
      var params = {
        label: kmsTypeModel[this.kmsType]
      }
      // // 进行编辑操作
      if (this.action.type == 'update') {
        params.id = this.action.id
      }

      filedGetField(params)
        .then(res => {
          this.getcrmRulesAndModel(res.data)
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 根据自定义字段获取自定义字段规则
    getcrmRulesAndModel(list) {
      let showStyleIndex = -1
      for (let index = 0; index < list.length; index++) {
        const item = list[index]
        showStyleIndex += 1

        /**
         * 规则数据
         */
        this.crmRules[item.fieldName] = this.getItemRulesArrayFromItem(item)
        /**
         * 表单数据
         */
        var params = {}
        if (
          item.formType == 'uploadsingle'
        ) {
          params['value'] = item.value ? { url: item.value } : []
        } else if (item.formType == 'time') {
          params['value'] = timekeep(item.value) || '0:0:0'
        } else if (item.formType == 'role') {
          params['value'] = item.value.length ? item.value.map(item => item.roleId) : item.value
          this.roleIds = item.value.length ? item.value.map(item => item.roleId) : []
        } else if (item.formType == 'category') {
          params['value'] = item.value || ''
          this.category = this.categorys[Number(item.value) - 1]
        } else {
          params['value'] = item.value || ''
        }
        params['key'] = item.fieldName
        params['data'] = item
        params['disabled'] = item.isDisabled == 1
        params['styleIndex'] = showStyleIndex
        if (item.formType == 'time' && this.action.type === 'update') {
          var fileType = this.action.data.fileType
          if (fileType == 'mp4' || fileType == 'mp3' || fileType == 'wmv' || fileType == 'avi' || fileType == 'dat' || fileType == 'mkv' || fileType == 'flv' || fileType == 'vob') {
            params['disabled'] = true
          }
        }
        this.crmForm.crmFields.push(params)
      }
    },
    /**
     * item 当行数据源
     */
    getItemRulesArrayFromItem(item) {
      var tempList = []
      // 验证必填
      if (item.isNull == 1) {
        if (item.formType == 'category') {
          tempList.push({
            required: true,
            message: item.name + '不能为空',
            trigger: []
          })
        } else {
          tempList.push({
            required: true,
            message: item.name + '不能为空',
            trigger: ['blur', 'change']
          })
        }
      }

      // 验证唯一
      if (item.isUnique == 1) {
        var validateUnique = (rule, value, callback) => {
          if ((isArray(value) && value.length == 0) || !value) {
            callback()
          } else {
            var validatesParams = {}
            validatesParams.fieldId = item.fieldId
            if (isArray(value)) {
              let postValue = ''
              if (value.length > 0) {
                if (
                  rule.item.formType == 'user' ||
                  rule.item.formType == 'structure'
                ) {
                  postValue = value
                    .map(valueItem => {
                      return rule.item.formType == 'user'
                        ? valueItem.userId
                        : valueItem.id
                    })
                    .join(',')
                } else if (rule.item.fieldName == 'categoryId') {
                  if (value && value.length) {
                    postValue = value[value.length - 1]
                  } else {
                    postValue = ''
                  }
                } else if (rule.item.formType == 'checkbox') {
                  postValue = value.join(',')
                }
              }
              validatesParams.value = postValue
            } else {
              validatesParams.value = value
            }
            if (this.action.type == 'update') {
              validatesParams.batchId = this.action.batchId
            }
            filedValidates(validatesParams)
              .then(res => {
                callback()
              })
              .catch(error => {
                callback(new Error(error.msg ? error.msg : '验证出错'))
              })
          }
        }
        tempList.push({
          validator: validateUnique,
          item: item,
          trigger:
            item.formType == 'checkbox' || item.formType == 'select'
              ? ['change']
              : ['blur']
        })
      }

      // 特殊字符
      if (item.formType == 'number') {
        var validateCRMNumber = (rule, value, callback) => {
          if (!value || value == '' || regexIsCRMNumber(value)) {
            callback()
          } else {
            callback(new Error('数字的整数部分须少于12位，小数部分须少于4位'))
          }
        }
        tempList.push({
          validator: validateCRMNumber,
          item: item,
          trigger: ['blur']
        })
      } else if (item.formType == 'floatnumber') {
        var validateCRMMoneyNumber = (rule, value, callback) => {
          if (!value || value == '' || regexIsCRMMoneyNumber(value)) {
            callback()
          } else {
            callback(new Error('货币的整数部分须少于10位，小数部分须少于2位'))
          }
        }
        tempList.push({
          validator: validateCRMMoneyNumber,
          item: item,
          trigger: ['blur']
        })
      } else if (item.formType == 'mobile') {
        var validateCRMMobile = (rule, value, callback) => {
          if (!value || value == '' || regexIsCRMMobile(value)) {
            callback()
          } else {
            callback(new Error('手机格式有误'))
          }
        }
        tempList.push({
          validator: validateCRMMobile,
          item: item,
          trigger: ['blur']
        })
      } else if (item.formType == 'email') {
        var validateCRMEmail = (rule, value, callback) => {
          if (!value || value == '' || regexIsCRMEmail(value)) {
            callback()
          } else {
            callback(new Error('邮箱格式有误'))
          }
        }
        tempList.push({
          validator: validateCRMEmail,
          item: item,
          trigger: ['blur']
        })
      } else if (item.formType == 'time') {
        var validateCRMEmail = (rule, value, callback) => {
          const time = value.replace(/:/g, ' ').split(' ')
          // eslint-disable-next-line no-unused-vars
          const sec = Number(time[0]) * 60 * 60 + Number(time[1]) * 60 + Number(time[2])
          // eslint-disable-next-line no-unused-vars
          var isError = false
          var errorText = ''
          if (time[1] > 60) {
            isError = true
            errorText = '分钟最大为60'
          }
          if (time[2] > 60) {
            isError = true
            errorText = '秒数最大为60'
          }
          if (sec <= 0) {
            isError = true
            errorText = sec == 0 ? '文件学习理想时长不能为0' : '文件学习理想时长不能为负数'
          }
          if (Number(time[0]) < 0 || Number(time[1]) < 0 || Number(time[2]) < 0) {
            isError = true
            errorText = '文件学习理想时长不能为负数'
          }
          if (isError) {
            callback(new Error(errorText))
          } else {
            callback()
          }
        }
        tempList.push({
          validator: validateCRMEmail,
          item: item,
          trigger: ['blur']
        })
      }
      return tempList
    },
    // 保存草稿
    saveDraftField() {
      this.saveField(false, true)
    },
    // 保存数据
    saveField(saveAndCreate, isDraft = false) {
      this.saveAndCreate = saveAndCreate
      if (this.kmsType == 'resource') {
        if (this.sourceTableList.length == 0) {
          this.$message.error(
            '请选择要上传的文件'
          )
          return
        }
      }
      if (this.kmsType == 'course') {
        if (this.sourceTableList.length == 0) {
          this.$message.error(
            '请选择要上传的资源'
          )
          return
        }
      }
      this.$refs.crmForm.validate(valid => {
        if (valid) {
          var params = this.getSubmiteParams(this.crmForm.crmFields)
          if (this.action.type == 'update') {
            params.entity[this.kmsType + 'Id'] = this.action[this.kmsType + 'Id']
          }
          this.submiteParams(params)
        } else {
          return false
        }
      })
    },
    /** 上传 */
    submiteParams(params) {
      this.loading = true
      var crmRequest = this.getSubmiteRequest()
      if (this.action.type == 'update') {
        const key = this.kmsType
        params.entity[key + 'Id'] = this.action.id
        params.entity.batchId = this.action.batchId
      }
      if (this.kmsType == 'resource') {
        params['files'] = this.sourceTableList
      }
      if (this.kmsType == 'course') {
        params['resources'] = this.sourceTableList
      }

      // 相关添加时候的多余提交信息
      if (
        this.action.relativeData &&
        Object.keys(this.action.relativeData).length
      ) {
        params = { ...params, ...this.action.relativeData }
      }
      crmRequest(params)
        .then(res => {
          this.loading = false
          if (this.kmsType == 'customer') {
            if (!this.saveAndCreate) {
              this.$message.success(
                this.action.type == 'update' ? '编辑成功' : '添加成功'
              )
              this.hidenView()
            }
          } else {
            this.hidenView()
            this.$message.success(
              this.action.type == 'update' ? '编辑成功' : '添加成功'
            )
          }
          // 回到保存成功
          this.$emit('save-success', {
            type: this.kmsType,
            data: res.data || {},
            saveAndCreate: this.saveAndCreate
          })
        })
        .catch(() => {
          this.loading = false
        })
    },
    /** 获取上传url */
    getSubmiteRequest() {
      if (this.kmsType == 'file') {
        return saveFile
      }
      if (this.kmsType == 'resource') {
        return saveResource
      }
      if (this.kmsType == 'course') {
        return saveCourse
      }
    },
    /** 拼接上传传输 */
    getSubmiteParams(array) {
      var params = { entity: {}, field: [] }
      for (let index = 0; index < array.length; index++) {
        const element = array[index]
        if (element.data.fieldType == 1) {
          // eslint-disable-next-line no-unused-vars
          if (element.key == 'role_id') {
            params.entity['roleId'] = this.getRealParams(element).toString()
          } else {
            params.entity[element.key] = this.getRealParams(element)
          }
        } else {
          element.data.value = this.getRealParams(element)
          params.field.push(element.data)
        }
      }
      return params
    },
    getProductParams(params, element) {
      if (element.value) {
        params['material'] = element.value.product ? element.value.product : []
        params.entity['totalPrice'] = element.value.totalPrice
          ? element.value.totalPrice
          : 0
        params.entity['discountRate'] = element.value.discountRate
          ? element.value.discountRate
          : 0
      } else {
        params['material'] = []
        params.entity['totalPrice'] = ''
        params.entity['discountRate'] = ''
      }
    },
    // 获取客户位置参数
    getCustomerAddressParams(params, element) {
      params['address'] = element.value.address
        ? element.value.address.join(',')
        : ''
      params['detailAddress'] = element.value.detailAddress
      params['location'] = element.value.location
      params['lng'] = element.value.lng
      params['lat'] = element.value.lat
    },
    // 关联客户 联系人等数据要特殊处理
    getRealParams(element) {
      if (element.data.formType == 'uploadsingle') {
        return element.value.url
      } else if (element.data.formType == 'time') {
        const time = element.value.replace(/:/g, ' ').split(' ')
        return Number(time[0]) * 60 * 60 + Number(time[1]) * 60 + Number(time[2])
      }
      return element.value
    },
    hidenView() {
      this.$emit('hiden-view')
    },
    // 根据类型获取标题展示名称
    getTitle() {
      if (this.kmsType == 'officePurchase') {
        return this.action.type == 'update' ? '编辑采购办公用品' : '新建采购办公用品'
      } else if (this.kmsType == 'normalPurchase') {
        return this.action.type == 'update' ? '编辑采购常规备货' : '新建采购常规备货'
      } else if (this.kmsType == 'projectPurchase') {
        return this.action.type == 'update' ? '编辑采购项目备货' : '新建采购项目备货'
      } else if (this.kmsType == 'devPurchase') {
        return this.action.type == 'update' ? '编辑采购研发用品' : '新建采购研发用品'
      } else if (this.kmsType == 'otherPurchase') {
        return this.action.type == 'update' ? '编辑其他采购' : '新建其他采购'
      } else if (this.kmsType == 'supplier') {
        return this.action.type == 'update' ? '编辑供应商' : '新建供应商'
      }
    },
    // 获取左边padding
    getPaddingLeft(item, index) {
      if (item.showblock && item.showblock == true) {
        return '0'
      }
      return item.styleIndex % 2 == 0 ? '0' : '25px'
    },
    // 获取左边padding
    getPaddingRight(item, index) {
      if (item.showblock && item.showblock == true) {
        return '0'
      }

      return item.styleIndex % 2 == 0 ? '25px' : '0'
    },
    getReletiveSource(data) {
      this.sourceTableList = data
    }
  }
}
</script>
<style lang="scss" scoped>
  .crm-create-container {
    position: relative;
    height: 100%;
  }

  .crm-create-flex {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
  }

  .crm-create-header {
    height: 40px;
    margin-bottom: 20px;
    padding: 0 10px;
    flex-shrink: 0;
    .close {
      display: block;
      width: 40px;
      height: 40px;
      margin-right: -10px;
      padding: 10px;
      cursor: pointer;
    }
  }

  .crm-create-body {
    flex: 1;
    /*overflow-x: hidden;*/
    /*overflow-y: auto;*/
  }

  /** 将其改变为flex布局 */
  .crm-create-box {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
  }

  .crm-create-item {
    flex: 0 0 50%;
    flex-shrink: 0;
    // overflow: hidden;
    padding-bottom: 10px;
  }

  // 占用一整行
  .crm-create-block-item {
    flex: 0 0 100%;
    flex-shrink: 0;
    padding-bottom: 10px;
  }

  .el-form-item /deep/ .el-form-item__label {
    line-height: normal;
    font-size: 13px;
    color: #333333;
    position: relative;
    padding-left: 8px;
    padding-bottom: 0;
  }

  .el-form /deep/ .el-form-item {
    margin-bottom: 0px;
  }

  .el-form /deep/ .el-form-item.is-required .el-form-item__label:before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
    position: absolute;
    left: 0;
    top: 5px;
  }

  .handle-bar {
    position: relative;
    .handle-button {
      float: right;
      margin-top: 5px;
      margin-right: 20px;
    }
  }

  .el-button + .el-button {
    margin-left: 0;
  }

  // 审核信息 里的审核类型
  .examine-type {
    font-size: 12px;
    color: white;
    background-color: #fd715a;
    padding: 0 8px;
    margin-left: 5px;
    height: 16px;
    line-height: 16px;
    border-radius: 8px;
    transform: scale(0.8, 0.8);
  }
  /*查重信息*/
  .showBtnCheck {
    margin-left: 8px;
    color: blue;
  }
  /*可输入可选择输入框*/
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }
</style>

